<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.*"%>
<%@ page import="org.json.*"%>
<%@ page import="com.gzgi.framework.*"%>
<%@ page import="com.gzgi.framework.util.*"%>
<%@ page import="com.gzgi.framework.context.*"%>
<%@ page import="com.gzgi.framework.config.*"%>
<%@ page import="com.gzgi.framework.integration.*"%>
<%@ page import="com.gzgi.framework.sys.model.*"%>
<%@ page import="com.gzgi.framework.tree.*"%>
<%@ page import="com.gzgi.framework.tree.helper.*"%>
<%
        com.gzgi.framework.util.RequestUtil.setRequestParameterToAttribute(request);
		String code = request.getParameter("code");
		String node = request.getParameter("node");
		 if(node != null){
           TreeModel treeModel = IntegrationFactory.getTreeModel(node);
		   if(treeModel != null && treeModel.getId() != null){
			       request.setAttribute("node", treeModel.getId());
				   request.setAttribute("text", treeModel.getName());
		   }
		} else if(code != null){
           TreeModel treeModel = IntegrationFactory.getTreeModelByCode(code);
		   if(treeModel != null && treeModel.getId() != null){
			       request.setAttribute("node", treeModel.getId());
				   request.setAttribute("text", treeModel.getName());
		   }
		} 
%>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>带复选框的树</title>
	<%@ include file="/pages/tm/header.jsp"%>
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/ext/resources/css/ext-all.css" />
	<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/ext/ext-all.js"></script>
	<script type="text/javascript">  
	Ext.BLANK_IMAGE_URL = "<%=request.getContextPath()%>/scripts/ext/resources/images/default/s.gif" ;
	var tree;

	Ext.onReady(function(){  
	         tree = new Ext.tree.TreePanel({
	          el:'tree-div',
	          useArrows:false,  
		      autoScroll:true,
	          animate:false,  
	          enableDD:false,
	          doubleClickExpand:false,
	          containerScroll: true,
	          loader: new  Ext.tree.TreeLoader({
	             dataUrl:'tree-data.jsp'
	          })
	     	});
	     /**
	      * 重写节点的双击事件
	      */
	     Ext.override(Ext.tree.TreeNodeUI, {
			onDblClick : function(e) {
				e.preventDefault();
				if (this.disabled) {
					return;
				}
				if (this.checkbox) {
					this.toggleCheck();
					tree.fireEvent('checkchange',this.node,this.checkbox.checked);
				}
				if (!this.animating && this.node.hasChildNodes()) {
					var isExpand = this.node.ownerTree.doubleClickExpand;
					if (isExpand) {
						this.node.toggle();
					};
				}
				this.fireEvent("dblclick", this.node, e);
			}
		}); 
	     /**
	      * checkbox单击事件
	      */
	     tree.on('checkchange', function(node, checked) {
   		     node.attributes.checked = checked;
	         node.eachChild(function(child) {
	         	 /** 操作其子节点 */
	             child.ui.toggleCheck(checked);
	             child.attributes.checked = checked;
	             /** 递归 */
		         child.fireEvent('checkchange', child, checked);
	         });
	         if(checked){
		         node.fireEvent('addChildNode',node);
		     }else{
		     	 node.fireEvent('removeChildNode',node);
		     }
		     tree.fireEvent('checkParent',node,checked);
	     }, tree);
	     /**
	      * 控制父节点的checkbox
	      */
	     tree.on('checkParent', function(node,checked){
	     	var parentNode = node.parentNode;
	     	if(parentNode){
	     		var childNodes = parentNode.childNodes;
	     		var flag = true;
		     	for(var i=0;i<childNodes.length;i++){
					if(childNodes[i].attributes.checked){
						flag = true;
						break;
					} else {
						flag = false;
						//break;
					}
		     	}
	     		parentNode.ui.toggleCheck(flag);
	     		parentNode.attributes.checked = flag;
	     		//递归
	     		tree.fireEvent('checkParent',parentNode,flag);
			 }
	     });
	   	 /**
	   	  * 添加一个节点
	   	  */
	   	 tree.on('addChildNode',function(node){
	   	 	var selObj = document.getElementById("sel_id");
	   	 	var option = document.createElement("option");
			option.value = node.id;
		 	option.innerHTML = node.text;
			
		 	/** 不能重复加入 */
		 	for(var i=0;i<selObj.options.length;i++){
		 		var _option = selObj.options[i];
		 		if(_option.innerHTML==node.text){
		 			return;
		 		}
		 	}
		 	if(node.childNodes.length==0){
		 		/** ie和ff都支持的写法 */
			 	selObj.appendChild(option);
			}
		 });
		 /**
		  * 移除某个节点
		  */
		 tree.on('removeChildNode',function(node){
	   	 	var selObj = document.getElementById("sel_id");
	   	 	var option = document.createElement("option");
		 	option.innerHTML = node.text;
		 	var index = -1;
		 	/** 获得该节点在select中的索引index */
		 	for(var i=0;i<selObj.options.length;i++){
		 		var _option = selObj.options[i];
		 		if(_option.innerHTML==node.text){
		 			index = _option.index;
		 		}
		 	}
		 	if(index!=-1){
		 		/** 删除option */
				selObj.remove(index);
			}
		 });
	     // set the root node  
	     var root = new  Ext.tree.AsyncTreeNode({
	         text: '<c:out value="${text}" />',
	         draggable: false,
			 checked: false,
	         id:'<c:out value="${node}" />'
	     });
	     tree.setRootNode(root);
	     // render the tree
	     tree.render();
	     root.expand();
	     //tree.expandAll();
	     
	     /** 注册select双击事件 */
	 	 var selObj = document.getElementById("sel_id");
	 	 selObj.ondblclick = function(){
	 	 	var _options = selObj.options;
	 	 	/** 被选中的option */
	 	 	var _selOption ;
	 	 	for(var i=0;i<_options.length;i++){
	 	 		if(_options[i].selected){
	 	 			_selOption = _options[i];
	 	 		}
	 	 	}
	 	 	if(_selOption){
	 	 		tree.fireEvent('removeOption',tree.getRootNode(),_selOption);
	 	 	}
	 	 };
	 	 /** 
	 	  * 去掉select中的option
	 	  */
	 	 tree.on('removeOption',function(node,option){
	 	 	if(node.childNodes.length==0 && node.text==option.innerHTML){
	 	 		document.getElementById("sel_id").remove(option.index);
	 	 		node.attributes.checked = false;
             	node.ui.toggleCheck(false);
             	tree.fireEvent('checkParent',node,false);
	 	 	}else{
	 	 		for(var i=0;i<node.childNodes.length;i++){
			        node.childNodes[i].fireEvent('removeOption', node.childNodes[i], option);
		        }
	 	 	}
	 	 });
	 }
	 );

	 function expandAll(){
		 tree.expandAll();
	 }

	  function collapseAll(){
		 tree.collapseAll();
	 }

 </script>
 <script language="javascript">
      function submitXY(){
		   var x = "";
		   var selObj = document.getElementById("sel_id");
	 	 	for(var i=0;i<selObj.options.length;i++){
                 var selOption = selObj.options[i];
                x = x + selOption.value; 
				if(i < selObj.options.length - 1){
					x = x+ ",";
				}
			}
			alert(x);
      }
 </script>
</head>
<body>
  <form name="iForm" method="post">
	<div>&nbsp;&nbsp;
	<a href="javascript: tree.expandAll();">全部展开</a> | <a href="javascript: tree.collapseAll();">全部收缩</a>
	<input type="button" name="submit" value="确定" onclick="javascript:submitXY();" class="button">
	</div>
	<table>
	<tr>
	<td width="75%" noWrap>
	<div id="tree-div" style="overflow:auto; height:585px;width:90%;border:1px solid #c3daf9;float:left;">
	</div>
	</td>
	</td>
	<td noWrap>
	<div id="append_div">
		<select multiple style="height:585px;width:200;border:1px solid #c3daf9;float:left;" id="sel_id" name="sel_id">
		</select>
	</div>
	</td>
	</tr>
	</table>
	
  </form>
</body>
</html>
